<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>誉禾植物店</title>
  <!-- bootstrap样式 -->
  <link href="https://cdn.staticfile.net/twitter-bootstrap/5.1.1/css/bootstrap.min.css" rel="stylesheet">
  <!-- element-ui的样式 -->
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
  <!-- vue2框架的js和emenet-ui的js -->
  <script src="https://unpkg.com/vue@2/dist/vue.js"></script>
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  <!-- 可以发送jquery请求 -->
  <script src="../js/jquery.min.js"></script>
  <!-- bootstrap框架 -->
  <script src="https://cdn.staticfile.net/twitter-bootstrap/5.1.1/js/bootstrap.bundle.min.js"></script>
  <!-- js动画 -->
  <script src="https://cdn.jsdelivr.net/npm/gsap@3.12.5/dist/gsap.min.js"></script>
  <!-- 用于发送请求 -->
  <script src="https://cdn.staticfile.org/vue-resource/1.5.1/vue-resource.min.js"></script>
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<!-- 促销活动 -->
<style>
  @media (min-width: 1200px) {

    .container,
    .container-lg,
    .container-md,
    .container-sm,
    .container-xl {
      max-width: 1200px;
    }
  }
</style>
<style>
  .el-pagination.is-background .el-pager li:not(.disabled).active {
    background-color: #b2e05d;
  }

  .tabs_h5_a:hover {
    color: #8eb359;
    cursor: pointer;
  }

  a {
    text-decoration: none;
    color: #000;
  }
</style>

<body>
  <div id="activities">
    <!-- 网页头部 -->
    <header>
      <iframe src="./header.html" height="110px" width="100%" frameborder="0"></iframe>
    </header>
    <!-- 网页内容图片 -->
    <section>
      <div style="width: 100%; height: 400px; overflow: hidden;">
        <img src="../img/slider-home-v1.jpg" width="100%" alt="">
      </div>
    </section>
    <!-- 促销活动 -->
    <section style="margin: 5% 0;">
      <div class="container">
        <div style="text-align: center;">
          <div>
            <img src="../img/object-09.png" alt="">
            <div style="display: flex; margin-top: 2%;margin-bottom: 3%;">
              <div style="margin: auto;">
                <img src="../img/line.jpg" height="6px" width="329px" alt="">
              </div>
              <div style="margin: auto;">
                <h2 style="font-weight: 600;margin: auto;">促销活动</h2>
              </div>
              <div style="margin: auto;">
                <img src="../img/line.jpg" height="6px" width="329px" alt="">
              </div>
            </div>
          </div>
        </div>
        <div v-if="flag" class="container">
          <div class="row">
            <div class="col-md-6" v-for="item in tableData">
              <div style="margin-top: 2%;" @click="a_change(item)">
                <img :src="url+'/download/'+item.img" width="100%" alt="">
              </div>
              <div style="text-align: center;margin-top: 2%;">
                <h5 style="font-weight: 600; text-align: center;"><a href="#" class="tabs_h5_a" @click="a_change()">{{
                    item.name }}
                    促销价格：{{ item.price }}元</a></h5>
                <p style="font-size: 12px; color: #5a5a5a;">{{ item.createTime }}</p>
                <p style="font-size: 14px;">{{ item.name }} 促销价格：{{ item.price }}元</p>
              </div>
            </div>
          </div>
          <div style="margin-top: 2%; text-align: center;">
            <el-pagination background layout="prev, pager, next" :current-page="current" :total="total"
              @current-change="currentPage" :page-size="6">
            </el-pagination>
          </div>
        </div>
        <div v-else class="container">
          <div class="row">
            <div class="col-md-4">
              <img :src="url+'/download/'+ruleForm.img" height="100%" width="80%" alt="">
            </div>
            <div class="col-md-8">
              <h5>{{ ruleForm.name }}</h5>
              <hr>
              <p style="font-size: 14px;">价格：<span style="color: red;font-size: 18px; font-weight: 600;">{{
                  ruleForm.price }}</span></p>
              <p>「材 料」 {{ ruleForm.material }}</p>
              <p>「包 装」 {{ ruleForm.packing }}</p>
              <p>「花 语」 {{ ruleForm.language }}</p>
              <p>「配送范围」 {{ ruleForm.distribution }}</p>
              <div style="display: flex;">
                <el-button type="primary" @click="addShop()" plain>加入购物车</el-button>
                <el-button type="success" @click="Buy()" plain>立即购买</el-button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
    <!-- 网页尾部 -->
    <footer>
      <iframe src="./footer.html" width="100%" height="400px" frameborder="0"></iframe>
    </footer>
  </div>
</body>
<script>
  new Vue({
    el: '#activities',
    data() {
      return {
        flag: true,
        input: '促销活动',
        tableData: [],
        ruleForm: {},
        shopForm: {},
        current: 1,
        total: 1,
        url: 'http://localhost:9081/common',
      }
    },
    created() {
      this.page_init();
    },
    methods: {
      // 点击查看详情
      a_change(item) {
        this.ruleForm = {}
        this.flag = false;
        this.ruleForm = item;
      },

      // 添加到购物车
      async addShop() {
        if (localStorage.getItem("userId") == null) {
          window.location.href = './login.html';
          return;
        }
        this.shopForm.uid = localStorage.getItem("userId");
        this.shopForm.gid = this.ruleForm.id;
        this.shopForm.goodsImg = this.ruleForm.img;
        this.shopForm.price = this.ruleForm.price;
        this.shopForm.count = 1;
        this.shopForm.goodsLanguage = this.ruleForm.language;
        this.shopForm.goodsName = this.ruleForm.name;
        const { data: result } = await this.$http.post('http://localhost:9081/plants_shop/insert', this.shopForm);
        if (result.flag) {
          this.$message.success(result.message);
        } else {
          this.$message.error(result.message);
        }
      },
      // 立即购买
      async Buy() {
        if (localStorage.getItem("userId") == null) {
          window.location.href = './login.html';
          return;
        }
        this.shopForm.uid = localStorage.getItem("userId");
        this.shopForm.gid = this.ruleForm.id;
        this.shopForm.goodsImg = this.ruleForm.img;
        this.shopForm.price = this.ruleForm.price;
        this.shopForm.count = 1;
        this.shopForm.goodsName = this.ruleForm.name;
        const { data: result } = await this.$http.post('http://localhost:9081/plants_orders/insert', this.shopForm);
        if (result.flag) {
          this.$message.success(result.message);
        } else {
          this.$message.error(result.message);
        }
      },
      // 当切换页面时调用
      currentPage(val) {
        this.current = Number(val);
        this.page_init();
      },
      // 初始化
      async page_init() {
        const { data: result } = await this.$http.get('http://localhost:9081/plants_goods/type/' + this.input + '/' + this.current);
        if (result.flag) {
          // 促销活动的数据
          this.tableData = result.list;
          // 当前页面
          this.current = result.current;
          // 总条数
          this.total = result.total;
        }
      },
    }
  })
</script>

</html>